<template>
  <div class="equ-maintenance">
    <div style="display: flex;">
      <van-dropdown-menu style="width: 30vw;" :overlay="false" :close-on-click-overlay="true" :close-on-click-outside="true">
        <van-dropdown-item ref="typeRef" :title="workshopFilter.curType.value === '-1' ? '选择车间' : workshopFilter.curType.name" @opened="relocationFn">
          <template #default>
            <van-radio-group v-model="workshopFilter.curType" @change="changeTypeFn">
              <template v-for="typeItem in workshopFilter.data">
                <van-radio style="margin-bottom: 2vh" :name="typeItem" shape="square">{{ typeItem.name }}</van-radio>
              </template>
            </van-radio-group>
          </template>
        </van-dropdown-item>
      </van-dropdown-menu>
      <van-field style="width: 65vw" label-width="0" v-model="queryParam.keyLike" placeholder="请输入设备关键字">
        <template #button>
          <div style="display: flex;align-items: center">
            <van-button type="primary" size="small" @click="loadEquipmentDataFn">查询</van-button>
            <van-icon style="margin-left: 3vw;" size="1.7rem" name="scan" @click.stop="openScanWinFn"></van-icon>
          </div>
        </template>
      </van-field>
    </div>

    <!-- 维保对象 -->
    <div style="padding: 1vh 1vw;margin-top: 2vh;">
      <div style="display: flex;justify-content: space-between;align-items: center; border-bottom: #1989fa 1px solid;">
        <div style="flex: 0 0 25vw;">
          <span style="color: #1989fa;font-size: 1.2rem;">{{ energyMeterTypeEnumFn(maintenance.workshop) }}</span>
        </div>
        <div>
          <span style="color: #6e4d23;font-size: 1.2rem;">{{ maintenance.equName }}-{{ maintenance.equModel }}-{{ maintenance.equNo }}</span>
        </div>
      </div>
      <div style="padding: 1vh 1vw; margin-top: 2vh; border-bottom: #1989fa 1px solid;">
        <van-radio-group direction="horizontal" v-model="maintenance.status" @change="changeStatusFn">
          <template v-for="sk in Object.keys(MAINTENANCE_STATUS)">
            <van-radio checked-color="#FA5D19" :name="Number(sk)">{{ MAINTENANCE_STATUS[sk] }}</van-radio>
          </template>
        </van-radio-group>
      </div>
      <div style="margin-top: 1vh; border-bottom: #1989fa 1px solid;">
        <div style="margin-bottom:0.5vh;display: flex;justify-content: center"><span style="font-size: 1rem">维保拍照</span></div>
        <div style="display: flex;flex-wrap: wrap;align-items: center">
          <view-pic-thumb v-if="maintenance.pics !== SPLIT_BLANK" :original-data="maintenance" :first-flag="false" :size="{width:'20vw',height:'20vw'}" :del-flag="true" @view="viewPicFn"></view-pic-thumb>
          <van-uploader v-model="pic.files" multiple :max-count="5"></van-uploader>
        </div>
      </div>
      <div style="border-bottom: #1989fa 1px solid;">
        <van-field type="textarea" v-model="maintenance.optRemark" label="维保备注" clearable autosize maxlength="50" show-word-limit rows="3">
        </van-field>
      </div>
      <div style="margin-top: 1vh; display: flex;justify-content:center;align-items: center;">
        <van-button type="danger" size="small" @click="() => closeFn()">取消</van-button>
        <van-button style="margin-left: 10vw;" type="warning" size="small" @click="confirmFn">确认维保</van-button>
      </div>
    </div>

    <!-- 设备列表弹窗 -->
    <van-popup v-model="equPop.show" position="bottom" get-container="body">
      <van-picker show-toolbar value-key="text" :columns="equPop.data" @confirm="selectEquFn"></van-picker>
    </van-popup>
  </div>
</template>

<script>
import ViewPicThumb from "@/components/view-pic-thumb";
import {
  ENERGY_METER_TYPE,
  energyMeterTypeEnumFn,
  MAINTENANCE_STATUS,
  SPLIT_BLANK,
  SPLIT_COMMA, SPLIT_HX
} from "@/api/enum";
import {
  changeEquipmentMaintenance, filterEquipmentData,
  loadEquipmentDetail,
} from "@/views/energy-consumption/energy-consumption";
import {uploadPic} from "@/components/file-upload/upload_file";

export default {
  name: "equMaintenance",
  components: {ViewPicThumb},
  props: {
    originalMaintenance: {
      type: Object,
      default() {
        return {
          id: 0
        }
      }
    },
  },
  data() {
    return {
      SPLIT_BLANK, MAINTENANCE_STATUS,

      /* 查询 */
      queryParam: {
        workshop: "-1",
        keyLike: SPLIT_BLANK,
        pageNum: 1,
        pageSize: 200,
      },

      /* 所属车间 */
      workshopFilter: {
        curType: {
          name: "全部",
          value: "",
        },
        data: [],
      },

      /* 设备列表 */
      equPop: {
        show: false,
        data: []
      },

      /* 维保对象 */
      maintenance: {
        id: 0,
        workshop: 0, // 车间位置
        type: 0, // 设备类型
        equId: 0, // 设备ID
        equName: SPLIT_BLANK, // 设备名
        equModel: SPLIT_BLANK,    //设备型号
        equNo: SPLIT_BLANK, // 设备编号
        maintenanceItem: SPLIT_BLANK, // 保养项目

        optRemark: "保养完毕", // 操作备注
        pics: SPLIT_BLANK, // 图片
        status: 3 // 状态
      },

      /* 图片相关 */
      pic: {
        type: "SBWB",
        thumbs: [],
        files: [],
      }
    }
  },
  mounted() {
    const that = this;
    that.initFn();
  },
  methods: {
    energyMeterTypeEnumFn,

    /* 初始化 */
    initFn() {
      const that = this;
      that.workshopFilter.data.splice(0, that.workshopFilter.data.length);
      that.workshopFilter.data.push(that.workshopFilter.curType);
      Object.keys(ENERGY_METER_TYPE).forEach(k => {
        that.workshopFilter.data.push({
          name: ENERGY_METER_TYPE[k],
          value: String(k),
        });
      });

      if(that.originalMaintenance.id > 0) {
        Object.keys(that.maintenance).filter(k => k !== "thumbs").forEach(k => {
          let v = that.originalMaintenance[k];
          if(Array.isArray(v)) {
            that.maintenance[k].splice(0, that.maintenance[k].length);
            v.forEach(item => {
              that.maintenance[k].push(item);
            });
          } else {
            that.maintenance[k] = that.originalMaintenance[k];
          }
        });
      }
    },

    /* 下拉菜单重定位 */
    relocationFn() {
      const that = this;
      that.$nextTick(() => {
        that.$refs.typeRef.$el.querySelector(".van-dropdown-item--down").style.top = "7vh";   //7vh调试的
      });
    },

    /* 更改选择类型 */
    changeTypeFn(typeItem) {
      const that = this;
      that.queryParam.workshop = typeItem.value;
    },
    /* 更改 */
    changeStatusFn(sk) {
      const that = this;
      console.log(sk)
      that.maintenance.optRemark = MAINTENANCE_STATUS[sk]/* + ENTRY_LINE + that.maintenance.optRemark*/;
    },

    /* 加载设备 */
    loadEquipmentDataFn() {
      const that = this;
      if(that.workshopFilter.value === "-1") {
        that.$toast.fail("请先选择车间");
        return;
      }
      that.equPop.data.splice(0, that.equPop.data.length);
      filterEquipmentData(that.queryParam, resData => {
        if(resData.code || resData.code == 0) {
          that.$toast.fail(resData.msg);
          return;
        }
        console.log(resData);
        resData.forEach(equ => {
          equ.text = equ.name + SPLIT_HX + equ.model + SPLIT_HX + equ.no;
          that.equPop.data.push(equ);
        });
        if(that.equPop.data.length > 0) {
          that.equPop.show = true;
        }
      });
    },

    /* 打开扫码窗 */
    openScanWinFn() {
      const that = this;
      const zyHmsScan = window.api.require('zyHmsScan');
      zyHmsScan.openDefaultView({}, ret => {
        if(ret.status) {
          if(ret.result.indexOf("42,") === 0) {
            let equId = ret.result.substr(3);
            loadEquipmentDetail({
              equId: equId
            }, resData => {
              if(resData.code || resData.code === 0) {
                that.$toast.fail(resData.msg);
                return;
              }
              that.selectEquFn(resData);
            });
          } else {
            that.$toast.fail("请扫消防设备码")
          }
        }
      });
    },

    /* 选中设备 */
    selectEquFn(equ) {
      console.log(equ);
      const that = this;
      that.maintenance.workshop = equ.workshop;
      that.maintenance.type = equ.type;
      that.maintenance.equId = equ.id;
      that.maintenance.equName = equ.name;
      that.maintenance.equModel = equ.model;
      that.maintenance.equNo = equ.no;
      that.equPop.show = false;
    },

    /* 关闭 */
    closeFn(reload) {
      const that = this;
      that.$emit("close", reload);
    },
    /* 确认巡查 */
    confirmFn() {
      const that = this;

      if(that.maintenance.equId === 0) {
        that.$toast.fail("必须选择一个待维保的设备");
        return;
      }
      if(that.maintenance.optRemark === SPLIT_BLANK) {
        that.$toast.fail("必须输入维保备注");
        return;
      }

      that.$toast.loading({
        message: '执行中...',
        forbidClick: true,
        loadingType: 'spinner',
      });

      let pics = that.maintenance.pics.split(SPLIT_COMMA).filter(pic => pic !== SPLIT_BLANK);
      if(that.pic.files.length > 0) {   //先上传再确认保存
        that.uploadPicFn(that.pic.files, resData => {
          pics.push(resData);
          that.pic.files.splice(0, that.pic.files.length);
          that.maintenance.pics = pics.join(SPLIT_COMMA);
          that.confirmFn();
        });
        return;
      }

      if(pics.length === 0) {
        that.$toast.fail("必须拍照上传");
        return;
      }

      changeEquipmentMaintenance(that.maintenance, resData => {
        if(resData.code || resData.code === 0) {
          that.$toast.fail(resData.msg);
          return;
        }
        that.$toast.success("维保成功");
        that.closeFn(true);
      })
    },

    /* 上传图片 */
    uploadPicFn(files, callback) {
      const that = this;
      if(files.length <= 0) {
        that.$toast("没有待上传的图片");
        return;
      }
      uploadPic(that, that.pic.type, files, resData => {
        if(callback) {
          callback(resData);
        }
      });
    },
    /* 查看图片 */
    viewPicFn(row) {
      const that = this;
      that.$emit("view", row);
    },
  }
}
</script>

<style lang="scss" scoped>
.equ-maintenance {

}
</style>